<template>
  <div>
    <v-header></v-header>
    <div>
      <div class="ris_cont">
        <!--<div class="ris_cont_headNav">字典页面&gt;科室维护</div>-->
        <div class="ris_cont_headHint">收费项目信息设置<input type="text" id="table8_search"/><div class="ris_cont_headHint_add" @click="add_ks1()">+</div></div>
        <div class="ris_cont_dept">
        	<div class="feeiLeft">
        		<h1>设备类型</h1>
        		<ul>
        			<li v-for="(item,index) in baseEqpTypeList" @click="getFeeItemByCode(item.code,index)" :class="index==index2?'ecdlActive':''">{{item.name}}</li>
        			<!--<li>XXXXXXXXX</li>-->
        		</ul>
        	</div>
          <div class="ris_cont_dept_tab50">
            <table v-loading="loading">
              <tr>
                <th>编号</th>
                <th>收费项目</th>
                <th>拼音码</th>
                <th>价格</th>
                <th>单位</th>
                <th>所属类型</th>
                <th>归属系统</th>
                <th>归属编号</th>
                <th>是否使用</th>
                <th>排序号</th>
                <th>备注</th>

                <th>操作</th>
              </tr>
              <tbody  class="ris_cont_dept_ta">
                <tr v-for="(item,i) in FeeItems">
                  <td>{{item.code}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.pycode}}</td>
                  <td>{{item.price}}</td>
                  <td>{{item.unit}}</td>
                  <td>{{mapping[item.eqptypecode]}}</td>
                  <td>{{item.source}}</td>
                  <td>{{item.sourcecode}}</td>
                  <td>{{item.isuse | usefilter}}</td>
                  <td>{{item.sortnum}}</td>
                  <td :title="item.memo"> {{item.memo | length6}} </td>
                  <td>
                    <button class="ris_cont_dept_tab_change bg_green color_white button " @click="wei(item.code,item.name,item.eqptypecode)">设备维护</button>
                    <button class="ris_cont_dept_tab_change bg_deepBlue color_white button" @click="update(item)">修改</button>
                    <button class="ris_cont_dept_tab_delete  bg_yellow color_white button" @click="dele(item.code)">删除</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!--新增或修改模态-->
      <div class="ris_dept_modal8" v-show="ks_motai">
        <div>
          <p class="ris_dept_modal_head8">收费项目设置<span class="ris_dept_modal_btn_close" @click="add_ks()">X</span></p>
          <table class="ris_dept_modal_tab8">
            <tr>
              <td>收费项目</td>
              <td><input type="text" v-model="obj.name" @blur="change(obj.name)"></td>
            </tr>
            <tr>
              <td>拼音码</td>
              <td><input type="text" v-model="obj.pycode"></td>
            </tr>
            <tr>
              <td>设备类型</td>
              <td>
                <select v-model="obj.eqptypecode">
                  <option v-for="item in Eqptypes" :value="item.code">{{item.name}}</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>价格</td>
              <td><input type="number" v-model="obj.price"></td>
            </tr>
            <tr>
              <td>归属系统</td>
              <td><input type="text" v-model="obj.source"></td>
            </tr>
            <tr>
            <tr>
              <td>归属编号</td>
              <td><input type="text" v-model="obj.sourcecode"></td>
            </tr>
            <tr>
              <td>单位</td>
              <td><input type="text" v-model="obj.unit"></td>
            </tr>
            <tr>
              <td>排序号</td>
              <td><input type="number" v-model="obj.sortnum"></td>
            </tr>
            <tr>
              <td>是否使用</td>
              <td>
                <select v-model="obj.isuse">
                  <option :value="1">是</option>
                  <option :value="0">否</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td><input type="text" v-model="obj.memo"></td>
            </tr>
          </table>
          <div class="ris_dept_modal_btn8">
            <button @click="queding()">确认</button>
            <button class="ris_dept_modal_btn_close" @click="add_ks()">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header/Header';
//  import HeaderComponent from './components/header.vue'
//  import OtherComponent from './components/other.vue'

export default {
components: {
    'v-header': Header
},
data() {
  return {
    ks_motai:false,
     msg: 'hello vue',
     //全部收费类型
    FeeItems:'',
    //设备类型  颜色选择
    index2:null,
    //一条收费类型信息
    obj:{
      name:"",
      price:"",
      pycode:"",
      sortnum:"",
      isuse:"",
      memo:"",
      source:"",
      sourcecode:"",
      eqptypecode:"",
      unit:"",

    },
    //设备类型
    Eqptypes:[],
    mapping:{},
    names:[],
    baseEqpTypeList:'',
    loading: false
     }
  },
  created(){
    var _this=this;
    //  window.localStorage.url="http://10.0.2.23:8090";
    // this.$http.get(window.localStorage.url+"/feeItem/findFeeItemall")
    //   .then(function (res) {
    //     if(res.data.status=='SUCCESS') {
    //       this.FeeItems=res.data.data;
    //   $.each( this.FeeItems,function(i,item){
    //     if(item.name){
    //       _this.names.push(item.name);
    //     }
    //   });
    //     }
    //   });

    this.$http.get(window.localStorage.url+"/feeItem/findBaseEqptypeall")
      .then(function (res) {
        if(res.data.status=='SUCCESS') {

          this.Eqptypes=res.data.data;


          $.each( this.Eqptypes,function(i,item){
            if(item.name){
              _this.mapping[item.code]=item.name;
            }
          });
        }
      });

    this.$http.get(window.localStorage.url+"/baseEqptype/findallEqptype")
      .then(function (res) {
        this.index2=null;
        if(res.data.status=='SUCCESS') {
          this.baseEqpTypeList=res.data.data;
        }
      });

  },
  methods:{

    //查询设备类型
    getFeeItemByCode(code,index) {
      this.index2=index;
      this.loading=true;
      this.$http.get(window.localStorage.url+'/feeItem/getFeeItemByEqpTypeCode?eqpTypeCode='+code).then(response => {
        this.loading=false
        if(response.data.status=='SUCCESS') {
//          console.log(response.data.data)
          this.FeeItems=response.data.data;
        }
      });

    },
//    添加 获得sortnum
    add_ks1(){

      this.obj={
        name:"",
          price:"",
          pycode:"",
          sortnum:"",
          isuse:1,
          memo:"",
          source:"",
          sourcecode:"",
          eqptypecode:"",
          unit:"",
      },

      this.ks_motai=!this.ks_motai;// 关闭
      //获得最大排序号
      this.$http.get(window.localStorage.url+"/feeItem/findMaxNum")
        .then(function (res) {

          this.obj.sortnum=res.data.data;

        });

//      console.log(this.obj+"obj");
    },

//    修改
    update(item){

      this.ks_motai=!this.ks_motai;
//      console.log(item);
      this.obj=item;

    },


    //添加修改模态的显示与不显示
    add_ks(i){

      this.ks_motai=!this.ks_motai;
//      if(this.ks_motai){
//        if(i!=null){
//        $.extend(true,this.obj,this.FeeItems[i]);
//          console.log( $.extend(true,this.obj,this.FeeItems[i]));
//          return;
//        }
//      this.obj={
//          pycode:""
//        };
//      }

    },
    //添加和修改的确定
    queding(){

      for(var i in this.Eqptypes){  //设备颜色
//        console.log(this.obj.eqptypecode)
        if(this.Eqptypes[i].code==this.obj.eqptypecode){
          this.index2=i;
//          console.log(i+"shebeiyanse");
        }
      }




      if(!this.obj.name){
        $pg.popup({
          text: "收费项目不能为空",//显示的文本
          btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor: '#4f56a3',//按钮的颜色
          btnToggle:{
            btnDetermine:true,//确定按钮是否显示
            btnCancel:false,//取消按钮是否显示
          }
        });
        return;
      }
//      console.log(this.obj.eqptypecode);
      if(!this.obj.eqptypecode){
        $pg.popup({
          text: "设备类型不能为空",//显示的文本
          btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor: '#4f56a3',//按钮的颜色
          btnToggle:{
            btnDetermine:true,//确定按钮是否显示
            btnCancel:false,//取消按钮是否显示
          }
        });
        return;
      }
      //obj.sortnum
      if(!this.obj.sortnum){
        $pg.popup({
          text: "排序号不能为空",//显示的文本
          btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor: '#4f56a3',//按钮的颜色
          btnToggle:{
            btnDetermine:true,//确定按钮是否显示
            btnCancel:false,//取消按钮是否显示
          }
        });
        return;
      }
      var _this=this;
      if(this.obj.code){
//        console.log("修改");
        this.$http.post(window.localStorage.url+"/feeItem/updateFeeItem",this.obj)
          .then(function (res) {
            if(res.data.status=='SUCCESS') {
              _this.ks_motai=!_this.ks_motai;
//              _this.$http.get(window.localStorage.url+"/feeItem/findFeeItemall")
//                .then(function (res) {
//                  if(res.data.status=='SUCCESS') {
//                    _this.FeeItems=res.data.data;
//
//                  }
//                });

              _this.$http.get(window.localStorage.url+'/feeItem/getFeeItemByEqpTypeCode?eqpTypeCode='+_this.obj.eqptypecode).then(response => {
                _this.loading=false
                if(response.data.status=='SUCCESS') {
//                  console.log(response.data.data);
                  _this.FeeItems=response.data.data;
                }
              });

            }else if(res.data.status=="repeat"){
              $pg.popup({
                text: res.data.msg,//显示的文本
                btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
                btnBgColor: '#4f56a3',//按钮的颜色
                btnToggle:{
                  btnDetermine:true,//确定按钮是否显示
                  btnCancel:false,//取消按钮是否显示
                }
              });
            }
          });
      }else{
//        console.log("添加");
        this.$http.post(window.localStorage.url+"/feeItem/addFeeItem",this.obj)
          .then(function (res) {
            if(res.data.status=='SUCCESS') {
              _this.ks_motai=!_this.ks_motai;
//              _this.$http.get(window.localStorage.url+"/feeItem/findFeeItemall")
//                .then(function (res) {
//                  if(res.data.status=='SUCCESS') {
//                    _this.FeeItems=res.data.data;
//
//                  }
//                });

              _this.$http.get(window.localStorage.url+'/feeItem/getFeeItemByEqpTypeCode?eqpTypeCode='+_this.obj.eqptypecode).then(response => {
                _this.loading=false
                if(response.data.status=='SUCCESS') {
//                  console.log(response.data.data)
                  _this.FeeItems=response.data.data;
                }
              });



            }else if(res.data.status=="repeat"){
              $pg.popup({
                text: res.data.msg,//显示的文本
                btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
                btnBgColor: '#4f56a3',//按钮的颜色
                btnToggle:{
                  btnDetermine:true,//确定按钮是否显示
                  btnCancel:false,//取消按钮是否显示
                }
              });
            }
          });
      }
    },
    //删除
    dele(code){
      var _this=this;
      $pg.popup({
        text:"确定删除吗？",//显示的文本
        btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
        btnBgColor:'#4f56a3',//按钮的颜色
        determine:function(){
          _this.$http.get(window.localStorage.url+"/feeItem/deleteFeeItem?code="+code)
            .then(function (res) {
              if(res.data.status=='SUCCESS') {

//                _this.$http.get(window.localStorage.url+"/feeItem/findFeeItemall")
//                  .then(function (res) {
//                    if(res.data.status=='SUCCESS') {
//                      _this.FeeItems=res.data.data;
//                    }
//                  });
//                console.log(_this.obj.eqptypecode);
                _this.$http.get(window.localStorage.url+'/feeItem/getFeeItemByEqpTypeCode?eqpTypeCode='+_this.obj.eqptypecode).then(response => {
                  _this.loading=false
                  if(response.data.status=='SUCCESS') {
//                  console.log(response.data.data)
                    _this.FeeItems=response.data.data;
                  }
                });


              }else if(res.data.status=='repeat'){
                $pg.popup({
                  text: "收费项目已被使用，禁止删除",//显示的文本
                  btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
                  btnBgColor: '#4f56a3',//按钮的颜色
                  btnToggle:{
                    btnDetermine:true,//确定按钮是否显示
                    btnCancel:false,//取消按钮是否显示
                  }
                });
              }
            });

        },//点击确定执行的方法
      });

    },
    change(name){
      var _this=this;
      _this.$http.get(window.localStorage.url+"/pytool/getPyCode?name="+name)
        .then(function (res) {
          if(res.data.status=='SUCCESS'&&res.data.data!=null&&res.data.data!="undefined") {
              _this.obj.pycode=res.data.data;
          }
        });

    },
    wei(code,name,type){
      window.localStorage.setItem("eqpfeecode",code);
      window.localStorage.setItem("eqpfeename",name);
      window.localStorage.setItem("eqpfeetype",type);
      this.$router.push({name: 'FeeItemEquSetting'});
    }
  },

  filters:{
    //过滤器
    usefilter(isuse){
      if(isuse==1){
        return "是";
      }else{
        return "否";
      }
    },
    length6(text){
      text=$.trim(text)+"";
      if(text.length>=7){
        text=text.slice(0,6);
        text=text+"...";
        return text;
      }else{
        return text;
      }
    }

  },

//  components: {'other-component': OtherComponent, HeaderComponent,}add_ks()
  mounted(){
    $pg.inputRetrieve({
      input:'#table8_search',
      table:'.ris_cont_dept_ta'
    })
  }
}
</script>
<style scoped>



  /*body {*/
  /*background-color: #ff0000;*/
/*}*/

  #table8_search{
    width: 150px;
    margin-left: 20px;
  }


  .ris_cont_headHint {
    height: 40px;
    background-color: #999;
    color: #f1f1f1;
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
  }


/*新增按钮*/
.ris_cont_headHint_add{
  width: 70px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  float: right;
  background-color: #666;
  color: #fff;
  cursor: pointer;
}
/*内容区*/
.ris_cont_dept{
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
}
/*左边*/
.feeiLeft{
	width: 14%;
	float: left;
	border: 1px solid #999;
	margin-top: 15px;
}
.feeiLeft>h1{
	line-height: 40px;
	background: #999;
	color: #fff;
	padding: 0 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.feeiLeft>ul{
	height: 500px;
	overflow: auto;
	line-height: 32px;
}
.feeiLeft>ul>li{
	border-bottom: 1px solid #ccc;
	padding: 0 10px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-size: 14px;
	cursor: pointer;
}


.ris_cont_dept_tab50{
  width: 85% !important;
  line-height: 40px;
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
  float: right;
}
.ris_cont_dept_tab50 table tr td,.ris_cont_dept_tab50 tr th{
  border: 1px solid #ddd;
}
.ris_cont_dept_tab50 table tr th{
  background-color: #666;
  color: #fff;
}
.ris_cont_dept_tab50 table tr td:last-child{
  width: 20%;
}
.ris_cont_dept_tab50 table tr td:last-child button{
  width: 24%;
  height: 26px;
  margin: 0 3%;
  /*background-color: #215c84;*/
 background: transparent;
 border: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.ris_cont_dept_tab50 table tr td:last-child button:nth-child(1){
  color: #57e103;
}
.ris_cont_dept_tab50 table tr td:last-child button:nth-child(2){
  color: #0000ff;
}
.ris_cont_dept_tab50 table tr td:last-child button:last-child{
  color: #FF3C2B;
}
.ris_cont_dept_tab50 table tr td:last-child button:hover{
  /*background-color: #1a4161;*/
}


/*点击删除弹出的模态框*/
.ris_dept_delete{
  position: fixed;
  z-index: 800;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(66,66,66,.2);
  display: none;
}
.ris_dept_delete>div{
  position: absolute;
  width: 260px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-left: -130px;
  margin-top: -75px;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: #fff;
}
.ris_dept_delete_head{
  height: 30px;
  text-align: right;
  background-color: #999;
  border-radius: 10px 10px 0 0 ;
}
.ris_dept_delete_head span{
  display: inline-block;
  padding: 0 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
/*文字*/
.ris_dept_delete_text{
  line-height: 70px;
  padding-left: 20px;
  font-size: 14px;
  color: #666;
}
/*按钮*/
.ris_dept_delete_btn{
  text-align: right;
}
.ris_dept_delete_btn button{
  width: 70px;
  background-color: #215c84;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  height: 30px;
  margin-right: 20px;
}
.ris_dept_delete_btn button:hover{
  background-color: #1a4161;
}

  .ris_cont {
    width: 95%;
    min-width: 1300px;
    /* border: 1px solid red; */
    margin: 50px auto 40px;
  }

/*新增或修改的模态*/
.ris_dept_modal8{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(66,66,66,.2);
  z-index: 2;

}
.ris_dept_modal8>div{
  position: absolute;
  width: 380px;
  height: 500px;
  left: 50%;
  top: 50%;
  margin-left: -190px;
  margin-top: -250px;
  border: 1px solid #000;
  background: #f7f7f7;
  border-radius: 10px;
}
/*模态头部*/
.ris_dept_modal_head8{
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  border-bottom: 1px solid #666;
  background: #999;
  border-radius: 10px 10px 0 0;
  font-size: 14px;
  color: #fff;
}
.ris_dept_modal_head8 span{
  display: inline-block;
  float: right;
  padding: 0 20px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
/*模态里面的内容*/
.ris_dept_modal_tab8{
  width: 85%;
  margin: 0 auto;
  line-height: 38px;
  margin-top: 20px;
}
.ris_dept_modal_tab8 tr td:nth-child(1){width: 30%}
.ris_dept_modal_tab8 tr td:nth-child(2){width: 70%}
.ris_dept_modal_tab8 tr td input,.ris_dept_modal_tab8 tr td select{
  width: 100%;
  height: 28px;
  border: 1px solid #666;
  border-radius: 3px;
  box-sizing: border-box;
}
.ris_dept_modal_tab8 tr td textarea{
  width: 100%;
  height: 60px;
  border: 1px solid #666;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  margin-top: 10px;
}
.ris_dept_modal_btn8{
  text-align: right;
}
.ris_dept_modal_btn8 button{
  width: 80px;
  height: 36px;
  background-color: #215c84;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin-right: 50px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.ris_dept_modal_btn8 button:hover{
  background-color: #1a4161;
}
  .ecdlActive{
    background: #eaeaea;
  }
</style>
